/** 
  计算机等级考试-创建考试类型
*/
<template>
  <div class="exam-create-container">
    <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
      <h1 class="condition-title">{{ $t('computerGrade.examTypeSet') }}</h1>
      <div class="edu-opertion-bar sub-title">
        <div class="float-right" style="display: flex;">
          <el-button v-if="permitToAddType" type="primary" @click="addExamType()">{{$t('common.btn.add')}}</el-button>
        </div>
      </div>
      <edu-table :pagination="false" :order='true' :tooltipEffect="tooltipEffect" stripe :data="dataList" size="mini" @selection-change="handleSelectionChange">
        <edu-table-column :label="$t('computerGrade.accountCode')" prop="subjectCode"></edu-table-column>
        <edu-table-column :label="$t('computerGrade.examType')" prop="competitionType"></edu-table-column>
        <edu-table-column :label="$t('common.text.operation')" fit width="300">
          <template slot-scope="scope">
            <div>
              <el-button type="text" @click="changeExamTypeEnable(scope.row)">
                <span v-if="scope.row.isEnabled === 1 && permitToClose">{{ $t('subjectCompetitionBase.close') }}</span>
                <span v-if="!scope.row.isEnabled && permitToOpen">{{ $t('subjectCompetitionBase.open') }}</span>
              </el-button>
              <el-button type="text" v-if="permitToEdit" @click="editExamType(scope.row)">{{ $t('common.btn.edit') }}</el-button>
              <el-button type="text" v-if="permitToDelete" @click="deleteExamType(scope.row)">{{ $t('common.btn.delete') }}</el-button>
            </div>
          </template>
        </edu-table-column>
      </edu-table>
      <el-row type="flex" class="row-bg" justify="end">
        <el-col>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryForm.pageNum_"
            :page-sizes="[20, 40, 80, 100]"
            :page-size="queryForm.pageSize_"
            layout="total, sizes, prev, pager, next, jumper"
            :total="queryForm.total_"
            style="float:right;margin-top:10px"
        ></el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <el-dialog
      :before-close="beforeClose"
      :title="title"
      width="30%"
      ref="dialogForm"
      class="template-setting-dialog"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-form :model="dialogForm" label-position="right" ref="dialogForm" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item
              :label="$t('computerGrade.examType') + ':'"
              prop="competitionType"
              :rules="[{ required: true, message: $t('computerGrade.requireExamType'), trigger: 'blur' }, { validator: checkSpecial, trigger: 'blur'}]">
              <el-input :placeholder="$t('common.pla.pleaseInput')" :maxlength="64" v-model="dialogForm.competitionType" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              :label="$t('computerGrade.accountCode') + ':'"
              prop="subjectCode"
              :rules="[{ required: true, message: $t('computerGrade.requireAccountCode'), trigger: 'blur' }, { validator: checkSpecial, trigger: 'blur'}]">
              <el-input :placeholder="$t('common.pla.pleaseInput')" :maxlength="64" v-model="dialogForm.subjectCode" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="beforeClose()">{{ $t('common.btn.cancel') }}</el-button>
        <el-button type="primary" @click="confirmExamType()">{{ $t('common.btn.confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import subjectCompetitionApi from 'common/src/api/subjectCompetition/subjectCompetition';
export default {
  components: {
  },
  data () {
    return {
      auths: [],
      permitToOpen: false,
      permitToClose: false,
      permitToAddType: false,
      permitToEdit: false,
      permitToDelete: false,
      title: '',
      dialogVisible: false,
      multipleSelection: [],
      queryForm: {
        pageNum_: 1,
        pageSize_: 20,
        total_: 0,
        condition: {
          educationTag: 1,
          subjectType: 1
        }
      },
      operateMode: 'add',
      dialogForm: {
        subjectCode: '',
        competitionType: '',
      },
      dataList: []
    }
  },
  created() {
    // 获取当前用户auths权限
    if (localStorage.getItem("sessiondata")) {
      if (JSON.parse(localStorage.getItem("sessiondata")).auths) {
        this.auths = JSON.parse(localStorage.getItem("sessiondata")).auths
      }
    }
    this.onSubmit()
  },
  methods: {
    // 校验特殊字符$
    checkSpecial(rule, value, callback) {
      let regEn = /[`$]/im;
      if (regEn.test(value)) {
        callback(new Error(this.$t('graduateBase.specialText')))
      } else {
        callback();
      }
    },
    getListData() {
      subjectCompetitionApi.computerExamTypeListPage(this.queryForm).then((res) => {
        this.dataList = res.data.list;
        this.queryForm.total_ = res.data.total_;
      })
    },
    onSubmit() {
      this.queryForm.pageNum_ = 1
      this.getListData()
    },
    // 新增考试类型
    addExamType() {
      this.operateMode = 'add'
      this.title = this.$t('computerGrade.createExamType')
      for (let key in this.dialogForm) {
        if (key === 'examId') {
          delete this.dialogForm['examId']
        }
        this.dialogForm[key] = ''
      }
      this.dialogVisible = true
    },
    // 编辑考试类型
    editExamType(row) {
      this.operateMode = 'edit'
      this.title = this.$t('computerGrade.editExamType')
      this.dialogForm = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },
    // 开启/关闭考试
    changeExamTypeEnable(row) {
      subjectCompetitionApi.computerOnOffExamType({
        "id": row.id,
        "isEnabled": row.isEnabled === 0 ? 1 : 0  // 启停状态 0停用 1启用
      }).then(_ => {
        this.$message({
          type: 'success',
          message: this.$t('subjectCompetitionBase.operateSuccessfully')
        })
        this.onSubmit()
      })
    },
    // 删除考试类型
    deleteExamType(row) {
      this.$delConfirm().then(_ => {
        subjectCompetitionApi.computerDeleteExamType({
          "id": row.id
        }).then(_ => {
          this.$message({
            type: 'success',
            message: this.$t('subjectCompetitionBase.operateSuccessfully')
          })
          this.onSubmit()
        })
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      this.queryForm.pageSize_ = val
      this.getListData()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum_ = val
      this.getListData()
    },
    beforeClose() {
      this.$refs['dialogForm'].clearValidate()
      this.dialogVisible = false
    },
    // 确定操作考试类型
    confirmExamType() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          if (this.operateMode === 'add') {
            subjectCompetitionApi.computerCreateExamType({
              "competitionType": this.dialogForm.competitionType,
              "subjectCode": this.dialogForm.subjectCode,
              "educationTag": 1,
              "subjectType": 1
            }).then(res => {
              if (res.code === 200) {
                this.$refs['dialogForm'].clearValidate()
                this.dialogVisible = false
                this.$message({
                  type: 'success',
                  message: this.$t('subjectCompetitionBase.operateSuccessfully')
                })
                this.onSubmit()
              }
            })
          } else {
            subjectCompetitionApi.computerModifyExamType({
              "id": this.dialogForm.id,
              "competitionType": this.dialogForm.competitionType,
              "subjectCode": this.dialogForm.subjectCode
            }).then(res => {
              if (res.code === 200) {
                this.$refs['dialogForm'].clearValidate()
                this.dialogVisible = false
                this.$message({
                  type: 'success',
                  message: this.$t('subjectCompetitionBase.operateSuccessfully')
                })
                this.onSubmit()
              }
            })
          }
        }
      })
    }
  },
  watch: {
    auths: {
      handler(newVal) {
        if (newVal && Array.isArray(newVal) && newVal.length > 0) {
          newVal.some(item => {
            if (item.authCode === 'subjectCompetition-examTypeCreate-open') {
              this.permitToOpen = true
            }
            if (item.authCode === 'subjectCompetition-examTypeCreate-close') {
              this.permitToClose = true
            }
            if (item.authCode === 'subjectCompetition-examTypeCreate-add') {
              this.permitToAddType = true
            }
            if (item.authCode === 'subjectCompetition-examTypeCreate-edit') {
              this.permitToEdit = true
            }
            if (item.authCode === 'subjectCompetition-examTypeCreate-delete') {
              this.permitToDelete = true
            }
          });
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style lang="scss" scoped>
  
</style>
